<template>
  <div class="container">
    <header-Bar></header-Bar>
    <div class="body">
      <page-body>
        <div class="content">
          <div class="titleBox">
            <a><span class="small_title" @click="toPerInfo" :style="perInfo">
                个人资料 </span></a>
            <span class="small_sep"> | </span>
            <a><span class="small_title" @click="toClassInfo" :style="classInfo">
                班级信息 </span></a>
            <span class="small_sep"> | </span>
            <a><span class="small_title" @click="toChangePassword" :style="changePassword">
                修改密码 </span></a>
            <span class="small_sep"> | </span>
            <a><span class="small_title" @click="toBeAssistant" :style="beAssistant">
                {{RoleSelect}} </span></a>
          </div>
          <div v-if="flag == 1">
            <per-info></per-info>
          </div>
          <div v-else-if="flag == 2">
            <class-info></class-info>
          </div>
          <div v-else-if="flag == 3">
            <change-password></change-password>
          </div>
          <div v-else-if="flag == 4">
            <be-assistant></be-assistant>
          </div>
        </div>
      </page-body>
    </div>
  </div>
</template>

<script>
import HeaderBar from '@/components/headerBar/HeaderBar';
import PageBody from '@/components/pageBody/PageBody';
import PerInfo from '@/views/PersonInfo/PerInfo';
import ClassInfo from '@/views/PersonInfo/ClassInfo';
import ChangePassword from '@/views/PersonInfo/ChangePassword';
import BeAssistant from '@/views/PersonInfo/BeAssistant';

export default {
  components: {
    HeaderBar,
    PageBody,
    PerInfo,
    ClassInfo,
    ChangePassword,
    BeAssistant,
  },
  data() {
    return {
      RoleSelect: '',
      perInfo: '',
      classInfo: '',
      changePassword: '',
      beAssistant: '',
      flag: 1,
    };
  },
  methods: {
    comfireRole() {
      if (window.localStorage.getItem('userRole') === '1') {
        this.RoleSelect = '权限转让';
      } else {
        this.RoleSelect = '成为学委';
      }
    },
    toPerInfo() {
      this.flag = 1;
      this.perInfo = 'color: #FAACA8; font-size: .55rem';
      this.classInfo = 'color: #66cccc';
      this.changePassword = 'color: #66cccc';
      this.beAssistant = 'color: #66cccc';
    },
    toClassInfo() {
      this.flag = 2;
      this.perInfo = 'color: #66cccc';
      this.classInfo = 'color: #FAACA8; font-size: .55rem';
      this.changePassword = 'color: #66cccc';
      this.beAssistant = 'color: #66cccc';
    },
    toChangePassword() {
      this.flag = 3;
      this.perInfo = 'color: #66cccc';
      this.classInfo = 'color: #66cccc';
      this.changePassword = 'color: #FAACA8; font-size: .55rem';
      this.beAssistant = 'color: #66cccc';
    },
    toBeAssistant() {
      this.flag = 4;
      this.perInfo = 'color: #66cccc';
      this.classInfo = 'color: #66cccc';
      this.changePassword = 'color: #66cccc';
      this.beAssistant = 'color: #FAACA8; font-size: .55rem';
    },
  },
  mounted() {
    this.comfireRole();
    this.toPerInfo();
  },
};
</script>

<style scoped>
a{
  cursor: pointer;
}
.container{
	background-color: #FAACA8;
	background-image: linear-gradient(19deg, #66cccc 0%, #FAACA8 50%,#DDD6F3 100%);
	background-size: 700%;
	animation: bganimation 15s infinite;
}
.body{
	display: block;
	padding-top: 3rem;
}
.content{
  margin: auto;
  width: 26rem;
  height: 14rem;
  background-color: #fff;
}
.titleBox{
  padding: 1rem 0 .5rem 1.5rem;
}
.small_title{
  color: #66cccc;
  font-size: .5rem;
}
.small_sep{
  font-size: .5rem;
  color: #808A87;
}
</style>
